<template>
  <a-spin :spinning="!show">
    <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
      <!-- S-查找条件 -->
      <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-row type="flex" :gutter="4">
          <a-col :span="12" :xs="24" :sm="9" :md="12" :lg="4">
            <a-form-item label="组织">
              <a-select v-model="form.orgId" placeholder="选择组织">
                <a-select-option :value="item.orgId" v-for="(item) in [...orgList]" :key="item.orgId">{{ item.orgName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :xs="24" :sm="6" :md="12" :lg="6" style="margin-top:6px;">
            <a-button type="primary" @click="fetchList()">查询</a-button>
            <a-button style="margin-left: 10px" @click="init()">重置</a-button>
          </a-col>

        </a-row>
      </a-form>
      <!-- E-查找条件 -->
      <!-- S-表格 -->
      <a-table :scroll="{ x: 1900 }" :columns="columns" :data-source="list" bordered :pagination="{ total }"
        @change="tableChange">
        <template slot="checkType" slot-scope="record">
          <span>{{checkTypeList.find(x=>x.value === record?.checkType)?.name || '无'     }}</span>
        </template>
        <template slot="isValid" slot-scope="record">
          <span>{{ record?.isValid == 1 ? '有效' : '无效' }}</span>
        </template>
        <template slot="status" slot-scope="record">
          <span v-if="record.status == -1">无效</span>
          <span v-if="record.status == 0">进行中</span>
          <span v-if="record.status == 1">整改中</span>
          <span v-if="record.status == 2">终审</span>
          <span v-if="record.status == 3">结案</span>
        </template>
        <template slot="action" slot-scope="record">
          <a-space>
            <a-button type="primary" ghost @click="editOpen(record)">编辑</a-button>
            <a-button danger @click="deleteTap(record?.userId)">删除</a-button>
            <a-button danger @click="trialOpen(record)">审核</a-button>
            <a-button danger @click="invalidTap(record?.id)">设置无效</a-button>
            <a-button danger @click="redeployOpen(record)">转派</a-button>
            <a-button danger @click="updateOpen(record)">整改</a-button>
          </a-space>
        </template>
      </a-table>
      <!-- E-表格 -->
      <!-- S-审核弹框 -->
      <trial-model ref="trailRef" @ok="fetchList" />
      <!-- E-审核弹框 -->
      <!-- S-审核弹框 -->
      <update-model ref="updateRef" @ok="fetchList" />
      <!-- E-审核弹框 -->
      <!-- S-编辑弹框 -->
      <edit-model ref="editRef" @ok="fetchList" :userAllList="userAllList" />
      <!-- E-编辑弹框 -->
      <!-- S-转派弹框 -->
      <redeploy-model ref="redeployRef" @ok="fetchList" :userAllList="userAllList" />
      <!-- E-转派弹框 -->
    </div>
  </a-spin>
</template>

<script>
import { message } from 'ant-design-vue';
import { mapState } from 'vuex'
import { postHiddenList, postHiddenDelete, postHiddenInvalid } from "@/services"
import { getOrgList } from "@/services"
import { getUserAllList } from "@/services"
import trialModel from "./components/trial"
import updateModel from "./components/update"
import editModel from "./components/edit"
import redeployModel from "./components/redeploy"

export default {
  components: {
    trialModel,
    updateModel,
    editModel,
    redeployModel,
  },
  name: 'HiddenDanger',
  data() {
    return {
      // 页面渲染状态
      show: false,
      // 表单
      form: {
        limit: 10,
        orgId: undefined,
        page: 1,
      },
      total: 0,
      // 组织列表
      orgList: [],
      // 列表
      list: [],
      // 表结构
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
          width: '100px',
        },
        {
          title: '检查类型',
          dataIndex: 'checkType',
          key: 'checkType',
          width: '160px',
          scopedSlots: { customRender: 'checkType' },
        },
        {
          title: '提交日期',
          dataIndex: 'createDate',
          key: 'createDate',
          width: '160px',
        },
        {
          title: '风险等级',
          dataIndex: 'dangerLevel',
          key: 'dangerLevel',
          width: '100px',
        },
        {
          title: '风险描述',
          dataIndex: 'dangerTitle',
          key: 'dangerTitle',
          width: '160px',
        },
        {
          title: '隐患分类',
          dataIndex: 'dangerType',
          key: 'dangerType',
          width: '100px',
        },
        {
          title: '是否有效',
          scopedSlots: { customRender: 'isValid' },
          width: '100px',
        },
        {
          title: '组织名称',
          dataIndex: 'orgName',
          key: 'orgName',
          width: '160px',
        },
        {
          title: '问题id',
          dataIndex: 'questionId',
          key: 'questionId',
          width: '100px',
        },
        {
          title: '复审人',
          dataIndex: 'recheckUser',
          key: 'recheckUser',
          width: '120px',
        },
        {
          title: '复审人Id',
          dataIndex: 'recheckUserId',
          key: 'recheckUserId',
          width: '100px',
        },
        {
          title: '上报人',
          dataIndex: 'reportUser',
          key: 'reportUser',
          width: '120px',
        },
        {
          title: '上报人Id',
          dataIndex: 'reportUserId',
          key: 'reportUserId',
          width: '100px',
        },
        {
          title: '状态',
          scopedSlots: { customRender: 'status' },
          width: '120px',
          fixed: 'right',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          width: '500px',
          fixed: 'right',
        },
      ],
      // 检查类型列表
      checkTypeList: [
        { name: '计划检查', value: 1 },
        { name: '立即检查', value: 2 },
        { name: '隐患上报', value: 3 },
      ],
      // 全部用户列表
      userAllList:[],
    }
  },
  computed: {
    ...mapState('setting', ['pageMinHeight']),
  },
  async created() {
    await this.fetchOrgList()
    // 获取列表
    this.fetchList()
    // 获取全部用户
    this.fetchUserAllList()
  },
  methods: {
    /**
     * 初始化
     */
    init(){
      this.form = this.$options.data().form
      this.fetchList()
    },
    /**
     * 打开转派弹框
     */
    redeployOpen(e) {
      this.$refs.redeployRef.open(e)
    },
    /**
     * 打开编辑弹框
     */
    editOpen(e) {
      console.log(e)
      this.$refs.editRef.open(e)
    },
    /**
     * 打开填写整改弹框
     */
    updateOpen(e) {
      this.$refs.updateRef.open(e)
    },
    /**
     * 打开审核弹框
     */
    trialOpen(e) {
      this.$refs.trailRef.open(e)
    },
    /**
     * 无效 
     */
    invalidTap(id) {
      let t = this
      this.$confirm({
        title: '提示',
        content: '你确定要设置无效吗?',
        okText: '确定',
        cancelText: '取消',
        async onOk() {
          t.show = false
          let res = await postHiddenInvalid({
            dangerRecordId: id,
          })
          t.show = true
          if (res.code == 0) {
            message.success(res.msg)
            t.fetchList()
          } else {
            message.error(res.msg)

          }
        },
      });
    },
    /**
     * 删除 
     */
    deleteTap(id) {
      let t = this
      this.$confirm({
        title: '提示',
        content: '你确定要删除吗?',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        async onOk() {
          t.show = false
          let res = await postHiddenDelete({
            userId: id,
            operator: '',
          })
          t.show = true
          if (res.code == 0) {
            message.success(res.msg)
            t.fetchList()
          } else {
            message.error(res.msg)

          }
        },
      });
    },
    /**
     * 获取列表
     */
    async fetchList() {
      this.show = false
      let { code, data } = await postHiddenList({
        limit: this.form.limit,
        orgId: this.form.orgId,
        page: this.form.page,
      })
      this.show = true
      if (code == 200) {
        this.list = data?.records
        this.total = data?.total
      }
    },
    /**
     * 获取组织列表 
     */
    async fetchOrgList() {
      let { code, data } = await getOrgList({})
      if (code == 200) {
        this.orgList = data
      }
    },
    /**
     * 表格回调
     */
    tableChange(e) {
      this.form.page = e.current
      this.form.limit = e.pageSize
      // 获取数据
      this.fetchList()
    },
    /**
     * 获取所有用户列表
     */
    async fetchUserAllList() {
      this.show = false
      let { code, data } = await getUserAllList({})
      this.show = true
      if (code == 200) {
        this.userAllList = data
      }
    },
  },
}
</script>

<style scoped lang="less">

</style>